<template>
  <div class="enterprise-map-wrap212" id="map21">

  </div>

</template>

<script>
  export default {
    name: 'airKMap',
    components: {},
    props: {
     
    },
    created() {
   
    },
    mounted() {
      setTimeout(()=>{
        this.initMap()
      },320)
    //  this.loadAirData()
    },
    data() {
      return {
        map: Object,
        loadNum :1 ,
        mapTypeNet : 1 // 1外网  2内网
      }
    },
    methods: {
      initMap: function () {
       let map = L.map('map21',{
         attributionControl:false,
         zoomControl:false,
         minZoom:6,
         crs: L.CRS.EPSG4326,
         }
         ).setView([29.605325600,106.5869800800], 10);
        this.map = map;
        this.queryClientIP();
        this.queyrLntLat();
      },
      //获取经纬度鼠标点击
      queyrLntLat(){
        var _this=this;
        this.map.on("click",function(evt){
          _this.$emit('getLongLat',evt.latlng)
         
        });
      },

      //判断是否启用天地图
       queryClientIP(){
        this.baseLayer = L.supermap.tiandituTileLayer({
          layerType: "vec",
          url: "http://t{s}.tianditu.com/{layer}_{proj}/wmts?tk=8152cdbb730f2c6ebf35266845e82c74"
        }).addTo(this.map);
        L.supermap.tiandituTileLayer({
            isLabel:true,
            url: "http://t{s}.tianditu.com/{layer}_{proj}/wmts?tk=8152cdbb730f2c6ebf35266845e82c74"
        }).addTo(this.map);
        //  document.write(returnCitySN["cip"]+','+returnCitySN["cname"]);  
      },
     
      nf(href){
        window.href = href.href;
      },
      timeFormat: function (originTime) {
        let day = originTime.substring(8, 10);
        let hour = originTime.substring(11, 13);
        let time = day + '日' + ' ' + hour + '时';
        return time
      }
    },
    watch: {
      
    }
  }
</script>

<style lang="less">
 //水环境
 .leaflet-marker-icon.leaflet-interactive{
   white-space: nowrap;
   >div{
      span:nth-child(1){
          position: relative;
          i{
              content: '';
              width: 6px;
              height: 6px;
              position: absolute;
              background: transparent;
              left: 5px;
              bottom: -5px;
          }
      }
    }
    span{
      padding: 6px;
    }
 }
  .lixian{
      span:nth-child(1){
        background: #c1ccd9;
        color: #fff;
      }
      span:nth-child(2){
          border: 1px solid #c1ccd9;
          border-left: 0;
          padding: 5px;
          color: #1a1a1a;
          background: rgba(255, 255, 255, 0.45)
      }
  }
  .levoneandtwo{
      span:nth-child(1){
        background: #1269ff;
        color: #fff;
      }
      span:nth-child(2){
          border: 1px solid #1269ff;
          border-left: 0;
          padding: 5px;
          color: #1a1a1a;
          background: rgba(255, 255, 255, 0.45)
      }
  }
  .levoneandthree{
      span:nth-child(1){
        background: #00e400;
        color: #fff;
      }
      span:nth-child(2){
          border: 1px solid #00e400;
          border-left: 0;
          padding: 5px;
          color: #1a1a1a;
          background: rgba(255, 255, 255, 0.45)
      }
  }
  .levoneandfour{
      span:nth-child(1){
        background: #edc24a;
        color: #fff;
      }
      span:nth-child(2){
          border: 1px solid #edc24a;
          border-left: 0;
          padding: 5px;
          color: #1a1a1a;
          background: rgba(134, 53, 53, 0.45)
      }
  }
  .levoneandfive{
      span:nth-child(1){
        background: #ff7e00;
        color: #fff;
      }
      span:nth-child(2){
          border: 1px solid #ff7e00;
          border-left: 0;
          padding: 5px;
          color: #1a1a1a;
          background: rgba(255, 255, 255, 0.45)
      }
  }
  .levoneandsix{
      span:nth-child(1){
        background: #ff0000;
        color: #fff;
      }
      span:nth-child(2){
          border: 1px solid #ff0000;
          border-left: 0;
          padding: 5px;
          color: #1a1a1a;
          background: rgba(255, 255, 255, 0.45)
      }
  }
  .enterprise-map-wrap212{
    width: 100%;
   // float: left;
    height: 100%;
    //border-left: 1px solid #dce2e8;
  }

  .my-div-icon{
    color: #8f51e8;
    font-style: normal;
    font-weight: bold;
    font-size: 14px
  }

  .legendContainer {
    left: 0;
    position: fixed;
    bottom: 20px;
    width: 100%;
    height: 34px;
    display: flex;
    justify-content: center;
  }



  .airLevelOffline {
    width: 35px;
    height: 20px;
    color: white;
    line-height: 20px;
    background: #c1ccd9;
  }

  .airLevelOne {
    width: 35px;
    height: 20px;
    color: white;
    line-height: 20px;
    background: #00e400;
    text-align: center;
  }

  .airLevelTwo {
    width: 35px;
    height: 20px;
    color: white;
    line-height: 20px;
    background: #edc24a;
  }

  .airLevelThree {
    width: 35px;
    height: 20px;
    color: white;
    line-height: 20px;
    background: #ff7e00;
  }

  .airLevelFour {
    width: 35px;
    height: 20px;
    color: white;
    line-height: 20px;
    background: #ff0000;
  }

  .airLevelFive {
    width: 35px;
    height: 20px;
    color: white;
    line-height: 20px;
    background: #990000;
  }

  .airLevelSix {
    width: 35px;
    height: 20px;
    color: white;
    line-height: 20px;
    background: #7e0000;
  }

  .infoWindow {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: space-around;
  }

  .top-section {
    display: flex;
    align-items: center;
    flex-basis: 100%;
    justify-content: space-around;
  }

  .address {
    color: #1a1a1a;
    font-size: 16px;
  }

  .level {
    color: #ffffff;
    flex-basis: 70px;
    text-align: center;
    background-color: #00e400;
  }

  .bottom-section {
    display: flex;
    flex-basis: 100%;
    justify-content: space-around;
  }

  .time {
    color: #666666;
    font-size: 13px;
    align-self: flex-start;
  }

  .aqi {
    padding-left: 5px;
  }

  /* 地图报警动画与样式 */
  .alarm-animation-wrapA{
    .circle-animationA{
      background:hsla(198, 100%, 45%, 0.459);
    }
    .circle-animationB{
      background:rgba(0, 161, 228, 0.46);
    }
  }
  .alarm-animation-wrapB{
    .circle-animationA{
      background:rgba(36, 198, 103, 0.459);
    }
    .circle-animationB{
      background:rgba(36,199,104,0.46);
    }
  }
  .alarm-animation-wrapC{
    .circle-animationA{
      background:rgba(228, 207, 15, 0.459);
    }
    .circle-animationB{
      background:rgba(229,206,16,0.46);
    }
  }
  .alarm-animation-wrapD{
    .circle-animationA{
      background:rgba(255, 126, 0, 0.459);
    }
    .circle-animationB{
      background:rgba(255,126,0,0.46);
    }
  }
  .alarm-animation-wrapE{
    .circle-animationA{
      background:rgba(255, 0, 0, 0.459);
    }
    .circle-animationB{
      background:rgba(255,0,0,0.46);
    }
    
  }
  .alarm-animation-wrapF{
    .circle-animationA{
      background:rgba(112,128,144, 0.46);
    }
    .circle-animationB{
      background:rgba(112,128,144,0.46);
    }
  }
  .circle-animationA{
    position:absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    top:0;
    left: 0;
    -webkit-animation:twinkling 2.1s infinite ease-in-out;
    animation:twinkling 2.1s infinite ease-in-out;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
  }
  .circle-animationB{
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    top: 9px;
    left: 9px;
    -webkit-animation:twinkling 2.1s infinite ease-in-out;
    animation:twinkling 2.1s infinite ease-in-out;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
  }
  @-webkit-keyframes twinkling {
    0% {
      opacity:0.2;
      filter:alpha(opacity=20);
      -webkit-transform:scale(1);
    }
    50% {
      opacity:0.5;
      filter:alpha(opacity=50);
      -webkit-transform:scale(1.12);
    }
    100% {
      opacity:0.2;
      filter:alpha(opacity=20);
      -webkit-transform:scale(1);
    }
  }@keyframes twinkling {
     0% {
       opacity: 0.2;
       filter: alpha(opacity=20);
       -webkit-transform: scale(1);
     }
     50% {
       opacity: 0.5;
       filter: alpha(opacity=50);
       -webkit-transform: scale(1.12);
     }
     100% {
       opacity: 0.2;
       filter: alpha(opacity=20);
       -webkit-transform: scale(1);
     }
   }

</style>
